<script>
import UiButton from '../../button'
import UiPopover from '../../popover'

export default {
  name: 'UiGridRowToolbar',
  props: {
    items: {
      type: Array,
      default: () => []
    },
    row: {
      type: Object,
      required: true
    },
    rowIndex: {
      type: Number
    }
  },
  computed: {
    innerItems() {
      return this.items.filter(v => {
        if (v.visible === false) {
          return false
        } else if (typeof v.visible === 'function') {
          return v.visible({
            row: this.row,
            index: this.rowIndex
          })
        } else {
          return true
        }
      })
    },
    rowItems() {
      return this.innerItems.filter(v => v.more !== true)
    },
    moreItems() {
      return this.innerItems.filter(v => v.more === true)
    }
  },
  data() {
    return {
      showMorePopover: false,
      loadingItems: []
    }
  },
  methods: {
    handleClick(item) {
      if (typeof item.click === 'function') {
        if (this.loadingItems.some(v => v === item)) {
          return
        }
        const rs = item.click({
          row: this.row,
          index: this.rowIndex
        })
        if (rs && rs.then) {
          this.loadingItems.push(item)
          rs.then(rs => {
            this.loadingItems = this.loadingItems.filter(v => v !== item)
          }, () => {
            this.loadingItems = this.loadingItems.filter(v => v !== item)
          })
        }
      }
    }
  },
  render(h) {
    const items = (this.rowItems || []).map((item, index) => {
      const loading = this.loadingItems.some(v => v === item)
      const control = item.render ? h('span', {
        key: index || item.name,
        class: 'ui-grid-row-toolbar__item'
      }, [item.render(h, item, this.row)]) : h('span', {
        key: index || item.name,
        class: 'ui-grid-row-toolbar__item'
      }, [h(UiButton, {
        props: {
          link: true,
          type: item.type || 'primary',
          loading: loading
        },
        on: {
          click: (evt) => {
            evt.stopPropagation()
            return this.handleClick(item)
          }
        }
      }, [item.label])])
      return control
    })
    if (this.moreItems && this.moreItems.length) {
      const moreMenuItems = this.moreItems.map(v => {
        return h('div', {
          class: [
            'ui-grid-row-toolbar__more-item',
            v.type ? 'is-' + v.type : 'is-primary',
            v.divided ? 'is-divided' : ''
          ],
          on: {
            click: (evt) => {
              evt.stopPropagation()
              this.handleClick(v)
              this.showMorePopover = false
            }
          }
        }, [v.label])
      })
      const moreMenu = h(UiPopover, {
        props: {
          trigger: 'hover',
          value: this.showMorePopover
        },
        on: {
          show: () => {
            this.showMorePopover = true
          },
          hide: () => {
            this.showMorePopover = false
          }
        },
        scopedSlots: {
          reference: () => {
            return h(UiButton, {
              class: 'ui-grid-row-toolbar__more-handle',
              props: {
                link: true,
                type: 'primary'
              }
            }, [h('span', {
              class: 'ui-grid-row-toolbar__more-handle-icon'
            })])
          }
        }
      }, [h('div', {
        class: 'ui-grid-row-toolbar__more-menu'
      }, moreMenuItems)])
      items.push(h('span', {
        class: 'ui-grid-row-toolbar__item',
        key: 'more'
      }, [moreMenu]))
    }
    return h('div', {
      class: 'ui-grid-row-toolbar'
    }, items)
  }
}
</script>
<style lang="less">
.ui-grid-row-toolbar{
  display: flex;
  flex-direction: row;
  align-items: center;
}
.ui-grid-row-toolbar__item{
  margin-right: 12px;
}
.ui-grid-row-toolbar__item:last-child{
  margin-right: 0;
}
.ui-grid-row-toolbar__more-handle{
  padding-left: 6px;
  padding-right: 6px;
  vertical-align: top;
  &:after {
    content: '';
    display: inline-block;
    vertical-align: top;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background-color: #999;
    margin: 6px 1px 0;
  }
  &:hover {
    background-color: rgba(0,0,0,.1);
  }
}
.ui-grid-row-toolbar__more-handle-icon{
  position: relative;
  &:after, &:before{
    content: '';
    display: inline-block;
    vertical-align: top;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background-color: #999;
    margin: 6px 1px 0;
  }
}
.ui-grid-row-toolbar__more-menu{
  padding-top: 6px;
  padding-bottom: 6px;
}
.ui-grid-row-toolbar__more-item{
  padding: 3px 12px;
  height: 28px;
  line-height: 28px;
  transition: all .25s;
  cursor: pointer;
  &:hover {
    background-color: #f8f8f9;
  }
  &.is-divided {
    margin-top: 12px;
    position: relative;
    &:before {
      content: '';
      position: absolute;
      top: -6px;
      left: 0;
      right: 0;
      border-top: 1px solid #eee;
    }
  }
  &.is-success{
    color: #7ebf4a;
    &:hover {
      color: #7ebf4a;
      background-color: lighten(#7ebf4a, 20%);
    }
  }
  &.is-info{
    color: #919399;
    &:hover {
      color: #919399;
      background-color: lighten(#919399, 20%);
    }
  }
  &.is-danger{
    color: #F91B22;
    &:hover {
      color: #F91B22;
      background-color: lighten(#F91B22, 44%);
    }
  }
  &.is-primary{
    color: #5f9efa;
    &:hover {
      color: #5f9efa;
      background-color: lighten(#5f9efa, 30%);
    }
  }
  &.is-warning{
    color: #dba54a;
    &:hover {
      color: #dba54a;
      background-color: lighten(#dba54a, 20%);
    }
  }
}
</style>
